////
/// Breakpoint
/// @group Breakpoint
////

//  th-breakpoint()
/// Output styles with a breakpoint context and a media query. Requires the
/// Breakpoint gem (https://github.com/at-import/breakpoint).
///
/// @since 0.0.10
/// @output Styles to output within the breakpoint.
/// @throw th-breakpoint() requires the Breakpoint gem - https://github.com/at-import/breakpoint
///
/// @param {list} $query - Media query to parse (https://github.com/at-import/breakpoint/wiki/Basic-Media-Queries).
/// @param {number} $breakpoint - A heading list breakpoint.
///
/// @example scss - Output a heading with a 768px breakpoint within a 768px min-width media query.
///   @include th-breakpoint(min-width 768px, 768px) {
///     $heading: th-core-context-get(heading);
///     @include th-heading($heading);
///   }

@mixin th-breakpoint(
  $query,
  $breakpoint
){
  @if variable-exists('breakpoint') and mixin-exists('breakpoint') {
    @include breakpoint($query) {
      @include th-breakpoint-context($breakpoint) {
        @content;
      }
    }
  } @else {
    @warn 'th-breakpoint requires the Breakpoint gem - https://github.com/at-import/breakpoint';
  }
}

//  th-breakpoint-context
/// Output content with breakpoint context.
///
/// @since 0.0.15
/// @content [Output with breakpoint context]
///
/// @param {number} $breakpoint - A heading list breakpoint.
///
/// @example scss - Output a heading with a 768px breakpoint context.
///   @include th-breakpoint(768px) {
///     $heading: th-core-context-get(heading);
///     @include th-heading($heading);
///   }

@mixin th-breakpoint-context(
  $breakpoint
){
  @include th-core-context-set(breakpoint, $breakpoint) {
    @content;
  }
}